<template>
  <div>
    <Card ref="card">
      <p slot="title">{{titlename}}</p>
      <a href="#" slot="extra" @click.prevent="refData">刷新</a>
      <Row :gutter="16">
        <Col span="6">
          <Input v-model="str" size="large" placeholder="请输入项目名称"/>
        </Col>

        <Col span="4">
          <Button @click="Search" size="large" type="primary" icon="ios-search">查询</Button>
        </Col>
      </Row>
    </Card>
    <Row class="margin-top-10">
      <Table border :columns="tableTitle" :data="tableData" ref="table" :height="tableHeight"></Table>
    </Row>
    <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50,100,300,500,1000,2000,5000]"
        @on-change="s=>{pPage=s;Search();}"
        @on-page-size-change="p=>{pSize=p;pPage=1;Search()}"
        show-total
        show-sizer
      />
    </Row>
    <Modal :mask-closable="false" v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>存档评估结果</span>
      </p>

      <br>

      <Row>
        <Select
          filterable
          label-in-value
          v-model="areaTmp"
          size="large"
          placeholder="请选择存档地区"
        >
          <Option v-for="item in areaList" :value="item.Gid" :key="item.Gid">{{ item.AreaName }}</Option>
        </Select>
      </Row>
      <br>

      <div slot="footer">
        <Button type="primary" size="large" v-on:click="Save">保存</Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" v-model="modalGroup" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>修改项目信息</span>
      </p>

      <Form :label-width="80">
        <FormItem label="县区">
          <Select filterable label-in-value v-model="pGroup.GroupArea" size="large" placeholder="县区">
            <Option v-for="item in areaList" :value="item.AreaName" :key="item.AreaName">{{ item.AreaName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="年度">
          <Select v-model="pGroup.GroupYear" size="large">
            <Option v-for="item in yearList" :value="item"  >{{ item }}</Option>
          </Select>
        </FormItem>
        <FormItem label="项目类别">
          <Input v-model="pGroup.GroupType" size="large" placeholder="项目类别" />
        </FormItem>

        <FormItem label="评估公司">
          <Select v-model="pGroup.CompanyId" size="large" placeholder="评估公司">
            <Option v-for="item in companyList" :value="item.Gid" :key="item.Gid">{{ item.Name }}</Option>
          </Select>
        </FormItem>

        <FormItem label="">

          <RadioGroup v-model="pGroup.IsShow" border>
            <Radio :label="0">对监管机构隐藏</Radio>
            <Radio :label="1">对监管机构显示</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="项目名称">
          <Tag color="green">{{ pGroup.GroupArea }}{{ pGroup.GroupYear }}{{ pGroup.GroupType }}</Tag>
        </FormItem>







      </Form>
      <div slot="footer">
        <Button :disabled="!pGroup.GroupArea || !pGroup.GroupYear || !pGroup.GroupType" type="primary" size="large"
          @click="SavePersonGroup()">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import {
  SearchPersonGrouphasPage,
  DeletePersonGroup,
  SavedPersonGroup,
  SearchArea, SavePersonGroup, GetCompanySign
} from "@/api/data";
export default {
  name: "search_person_group",
  data() {
    return {
      str: "",
      total: 0,
      pPage: 1,
      pSize: 50,
      tableHeight: 450,
      modalGroup: false,
      modal2: false,
      areaList: [],
      areaTmp: "",
      tmpGid: "",
      pGroup: {
        
      },
      tableTitle: [
        {
          title: "序号",
           key: "R_INDEX",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h("div", [
            h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.pGroup = params.row; 
                      this.modalGroup = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.tmpGid = params.row.Gid;
                      this.modal2 = true;
                    }
                  }
                },
                "存档"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.Delete(params.row.Gid);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        },
        {
          title: "项目名称",
          key: "GroupName",
          minWidth: 300,
          render: (h, params) => {
            return h(
              "a",
              {
                props: {
                  href: "#"
                },
                style: {
                  fontSize: "18px"
                },
                on: {
                  click: () => {
                    this.turntodetail(params.row);
                  }
                }
              },
              params.row.GroupName
            );
          }
        },
        {
          title: "监管机构显示",
          key: "IsShow",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h("div", params.row.IsShow == 1 ? "是" : "否");
          }
          
        },
        
         {
          title: "实施日期",
          key: "sys_CreateDate",
          align: "center",
          width: 150,
          render: (h, params) => {
            return h(
              "div",
              dayjs(params.row.sys_CreateDate).format("YYYY年MM月DD日")
            );
          }
        },
        
       
        
      ],
      tableData: [],
      titlename: "",
      routername: "",
      companyList: [],
      yearList: []
    };
  },

  methods: {
    SearchArea() {
      let vm = this;
      SearchArea().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.areaList = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    getYear() {
      var date = new Date();
      var year = date.getFullYear();
      for (var i = -5; i < 6; i++) {
        var tmpYear = year + i + "年度";
        this.yearList.push(tmpYear);
      } 
    },
    getCompanySign() {
      let vm = this;
      GetCompanySign().then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.companyList = data.Data;
          
        } else {
          Message.error(data.Message);
        }
      });
    },
    Search() {
      let vm = this;
      var reqData = {
        str: vm.str,
        issaved: 0,
        page: vm.pPage,
        size: vm.pSize
      };
      SearchPersonGrouphasPage(reqData).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    refData() {
      this.SearchArea();
      this.Search();
      this.getCompanySign();
      this.getYear();
    },
    Save() {
      let vm = this;
      if (!this.tmpGid) {
        Message.error("存档分组不能为空");
        return;
      }
      if (!this.areaTmp) {
        Message.error("地区不能为空");
        return;
      }
      var reqData={
        gid:this.tmpGid,
        areaid:this.areaTmp
      }
      SavedPersonGroup(reqData).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.Search();
              this.$Modal.success({ title: "提示", content: "存档成功" });
              this.modal2=false;
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
      
    },
    SavePersonGroup() {
      let vm = this;
      if (!this.pGroup.GroupArea) {
        this.$Modal.error({ title: "提示", content: "请选择县区" });
      } else if (!this.pGroup.GroupYear) {
        this.$Modal.error({ title: "提示", content: "请选择年度" });
      } else if (!this.pGroup.GroupType) {
        this.$Modal.error({ title: "提示", content: "请填写项目类别" });
      } else {
      
        this.pGroup.GroupName =
          this.pGroup.GroupArea + this.pGroup.GroupYear + this.pGroup.GroupType;

      }
      SavePersonGroup(this.pGroup).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.modalGroup = false;
          Message.success("操作成功");
        } else {
          Message.error(data.Message);
        }
      });
    },
    Delete(id) {
      Modal.confirm({
        title: "提示",
        content: "信息删除后无法恢复，确定要删除吗？",
        onOk: () => {
          DeletePersonGroup(id).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.Search();
              this.$Modal.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {}
      });
    },
    turntodetail(item) {
      if (this.routername == "search_person_group") {
        this.$router.push({
          name: "search_person",
          params: { id: item.Gid },
          query: { groupname: item.GroupName }
        });
      } else {
        this.$router.push({
          name: "search_assessperson",
          params: { id: item.Gid },
          query: { groupname: item.GroupName }
        });
      }
    }
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 200;
    this.titlename = this.$route.meta.title;
    this.routername = this.$route.name;
    this.refData();
  }
};
</script>
